﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>서서히 보이기 및 숨기기</title>

    <style type="text/css">
        #my .hover
        {
        cursor:pointer;
        background-color:Yellow;
        }
        div {background-color:Silver; height:100px;}
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

        	$("#btn").click(function(){
        	 $("#first")
        	 .fadeIn('slow')
        	 .slideUp('slow');
        		
        		
        		//$("#first").fadeIn('slow');
        		//$("#second").fadeOut('fast');
        	});


        });
    </script>

</head>

<body>

    <input type="button" id="btn" value="페이드 효과 주기" />
    <div id="first" style="display:none;background-color:Yellow;">
    첫번째 영역
    </div>

    <div id="second">
    또 만나요
    </div>

</body>

</html>
